<template>
  <ul class="item_list">
    <li class="item" v-for="(item,index) in items" :title="item.name" :index="item.index" >
      <div class="item_icon"><span></span></div>
      <div class="item_name" >{{item.name}} </div>
    </li>
  </ul>
</template>
<script>
import topoApi from 'api/topo.js'
import eventHubs from 'common/eventHubs'
export default {
  name: 'itemList',
  data() {
    return {
      hostid:'',
      items:[
        // {
        //   itemid:'',
        //   valueType:'',
        //   name:name,
        //   reportChartData:reportChartData
        // }
      ]
    }
  },
  created(){
    const self = this
    //接受host改变的事件
    eventHubs.getEventHub().$on('hostChanged', (data) => {
      self.hostid = data
      self.initItemsData()
    });

    //接受item的报告图形数据
    eventHubs.getEventHub().$on('itemRepotChartData', (data) => {
      let index = data.index
      self.items[index].reportChartData = data.reportChartData
    });
  },
  mounted() {
    const self = this
    this.$nextTick(function() {
      self.initBtnEvent()
    })
  },
  methods: {
    initBtnEvent() {
      const self = this
      //绑定监控项的点击事件
      $('.item_list').delegate('.item','click', function(e) {
        $('.item_list .item').removeClass('active')
        $(this).addClass('active')
        let index = $(this).attr('index')
        //注册item改变的事件
        eventHubs.getEventHub().$emit("itemChanged", self.items[index]);
      });
    },
    initItemsData(){
      const self = this
      if(self.hostid){
        //获取主机的监控项数据
        topoApi.queryItemsByHostId(self.hostid).then((resp)=>{
          self.items = resp.data
          self.items = self.items.map((item,index)=>{
            item.reportChartData = null
            item.index = index
            return item
          })
          //初始化选中第一个
          setTimeout(function(){
            $('.item_list .item').first().trigger('click')
          },500)

        })
        .catch( (err)=>{
          console.error(err)
          self.$message(err);
        })
      }
    }
  }
}
</script>
<style scoped>
.item_list{
width:100%;max-width:100%;margin:10px 0 20px 0;padding:0;border:0px;height:100px;line-height:100px;overflow-y:scroll;
}
.item_list .item{
  cursor:pointer;float:left; margin:6px 5px 6px 15px; width: 200px;line-height:20px; padding:0px; overflow:hidden;list-style-type: none;
}

.item_list .item .item_icon{
  float:left;width:20px;height:20px;margin:0px;padding:0px;
}
.item_list .item .item_icon span{
  background-color:#3db58d;width:10px;height:10px;box-sizing:border-box;margin:5px;padding:0px;display:inline-block;
}
.item_list .item .item_name{
  float:left;width:180px;height:20px;margin:0px;padding:0px;overflow:hidden
}
.item_list .active {
  color: #1d90e6;
  border-color: #1d90e6;
  outline: 0;
  border-top: 1px solid  #1d90e6;
  border-bottom: 1px solid  #1d90e6;
  margin:5px 5px 5px 15px;
}
</style>
